<template>
  <div id="app">
    <h2>上传之前先<a class='link' href='http://jssdk.demo.qiniu.io/uptoken'>点击我</a>获取最新token把Qiniu.uploader({uptoken: 'xxx'})替换下</h2>
    <span id='pickfiles'>上传按钮</span>
    <div class="progress">{{progress}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      progress: ''
    }
  },
  mounted () {
    this.initQiniu()
  },
  methods: {
    initQiniu () {
      /* eslint-disable */
      Qiniu.uploader({
        runtimes: 'html5,flash,html4',
        browse_button: 'pickfiles',
        flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',
        chunk_size: '4mb',
        uptoken: 'xozWSPMxkMjIVoHg2JyXq4-7-oJaEADLOKHVR0vU:HpzPL-1S10uavBUePK5JcaoA4WY=:eyJkZWxldGVBZnRlckRheXMiOjcsInNjb3BlIjoianNzZGsiLCJkZWFkbGluZSI6MTUxOTM4NjQ4MX0=',
        // uptoken_url: 'http://jssdk.demo.qiniu.io/uptoken',
        domain: 'http://qiniu-plupload.qiniudn.com/',
        get_new_uptoken: false,
        auto_start: true,
        max_retries: 3,
        filters: {
          max_file_size: '10000mb',
          prevent_duplicates: false
          // Specify what files to browse for
          // mime_types: [
          //     {title : 'apk files', extensions : 'apk'} // 限定apk后缀上传格式上传
          // ]
        },
        init: {
          'FilesAdded': (up, files) => {
              console.log('文件就绪', files);
          },
          BeforeUpload: (up, file) => {
            console.log('上传之前', file);
          },
          UploadProgress: (up, file) => {
            console.log('上传中 file',file);
            this.progress = file.percent + '%';
          },
          FileUploaded: (up, file, info) => {
            console.log('文件上传完毕')
          },
          Error: (up, err, errTip) => {
            console.log('上传失败', err);
          },
          Key: (up, file) => {}
        }
      });
    }
  }
}
</script>

<style>
  #pickfiles {
    padding: 10px;
    background: #000;
    border-radius: 5px;
    color: #fff;
  }
  .link {
    color: red;
  }
  .progress {
    color: red;
    font-size: 30px;
    margin-top: 20px;
  }
</style>
